<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情 - ubike</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        /* 博客详情页面专用样式 - 与网站主题一致 */
        .blog-detail-container {
            min-height: 100vh;
            background: var(--bg-light);
            padding: 30px 0;
        }

        .blog-detail-content {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 面包屑导航 */
        .breadcrumb {
            margin-bottom: 30px;
            font-size: 0.9rem;
            color: var(--text-medium);
            padding: 10px 0;
        }

        .breadcrumb a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        .breadcrumb a:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }

        /* 博客文章容器 */
        .blog-article {
            background: var(--bg-white);
            border-radius: var(--border-radius-lg);
            padding: 40px;
            box-shadow: var(--shadow-medium);
            margin-bottom: 30px;
            border-left: 4px solid var(--primary-color);
        }

        /* 文章头部 */
        .article-header {
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 25px;
            margin-bottom: 30px;
        }

        .article-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.3;
            margin-bottom: 15px;
        }

        .article-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            color: var(--text-medium);
            font-size: 0.9rem;
            flex-wrap: wrap;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .article-category {
            background: rgba(30, 136, 229, 0.1);
            color: var(--primary-color);
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 500;
            border: 1px solid rgba(30, 136, 229, 0.2);
        }

        /* 文章内容 */
        .article-content {
            line-height: 1.8;
            color: var(--text-dark);
            font-size: 1.1rem;
        }

        .article-content h2 {
            font-size: 1.6rem;
            margin: 30px 0 15px 0;
            color: var(--primary-color);
            border-left: 4px solid var(--primary-color);
            padding-left: 15px;
            font-weight: 600;
        }

        .article-content h3 {
            font-size: 1.3rem;
            margin: 25px 0 12px 0;
            color: var(--text-dark);
            font-weight: 500;
        }

        .article-content p {
            margin-bottom: 15px;
        }

        .article-content img {
            max-width: 100%;
            height: auto;
            border-radius: var(--border-radius-md);
            margin: 20px 0;
            box-shadow: var(--shadow-light);
        }

        .article-content blockquote {
            border-left: 4px solid var(--primary-color);
            background: var(--bg-light);
            padding: 15px 20px;
            margin: 20px 0;
            font-style: italic;
            color: var(--text-medium);
            border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
        }

        /* 文章底部 */
        .article-footer {
            border-top: 2px solid var(--border-color);
            padding-top: 25px;
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .article-actions {
            display: flex;
            gap: 15px;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background: var(--bg-white);
            color: var(--text-medium);
            cursor: pointer;
            transition: all var(--transition-fast);
            font-size: 0.9rem;
        }

        .action-btn:hover {
            background: var(--bg-light);
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .action-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--bg-white);
        }

        .share-section {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .share-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--bg-light);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-fast);
            color: var(--text-medium);
        }

        .share-btn:hover {
            background: var(--primary-color);
            color: var(--bg-white);
            transform: scale(1.1);
        }

        /* 相关文章 */
        .related-articles {
            background: var(--bg-white);
            border-radius: var(--border-radius-lg);
            padding: 30px;
            box-shadow: var(--shadow-medium);
        }

        .related-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 20px;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
        }

        .related-list {
            display: grid;
            gap: 15px;
        }

        .related-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: var(--bg-light);
            border-radius: var(--border-radius-md);
            text-decoration: none;
            color: var(--text-dark);
            transition: all var(--transition-fast);
        }

        .related-item:hover {
            background: rgba(30, 136, 229, 0.1);
            transform: translateX(5px);
            box-shadow: var(--shadow-light);
        }

        .related-item img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: var(--border-radius-sm);
        }

        .related-content {
            flex: 1;
        }

        .related-item-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 1rem;
            color: var(--text-dark);
        }

        .related-item-meta {
            font-size: 0.8rem;
            color: var(--text-medium);
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 60px 0;
            color: var(--text-medium);
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--bg-light);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .blog-detail-content {
                padding: 0 15px;
            }

            .blog-article {
                padding: 25px;
            }

            .article-title {
                font-size: 1.8rem;
            }

            .article-meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .article-footer {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }

            .related-item {
                flex-direction: column;
                text-align: center;
            }

            .related-item img {
                width: 100%;
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <header class="header">
        <div class="wrap">
            <!-- 导航菜单 -->
            <nav class="main-nav">
                <div class="nav-container">
                    <div class="logo">
                        <a href="/">
                            <img src="/static/tp/Logo.png" alt="ubike">
                        </a>
                    </div>

                    <ul class="nav-menu">
                        <li><a href="/">首页</a></li>
                        <li><a href="/about">关于我们</a></li>
                        <li>
                            <a href="#" onclick="alert('特色服务页面正在开发中...')">特色服务 <i class="fas fa-chevron-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="#" onclick="alert('产品定制页面正在开发中...')">产品定制</a></li>
                                <li><a href="#" onclick="alert('物流配送页面正在开发中...')">物流配送</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="/products">产品图集</a>
                        </li>
                        <li class="active">
                            <a href="/blog">行业资讯</a>
                        </li>
                        <li>
                            <a href="/contact">联系我们</a>
                        </li>
                    </ul>
                    <div class="nav-right">
                        <div class="search-box">
                            <input type="text" placeholder="搜索...">
                            <button><i class="fas fa-search"></i></button>
                        </div>
                        <div class="contact-info">
                            <span class="email"><i class="fas fa-envelope"></i>h3444850160@gmail.com</span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- 博客详情内容 -->
    <div class="blog-detail-container">
        <div class="blog-detail-content">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <a href="/">首页</a> &gt; 
                <a href="/blog">博客</a> &gt; 
                <span id="breadcrumbTitle">文章详情</span>
            </div>

            <!-- 加载状态 -->
            <div id="loading" class="loading">
                <div class="loading-spinner"></div>
                <p>正在加载文章内容...</p>
            </div>

            <!-- 博客文章 -->
            <div id="articleContent" style="display: none;">
                <div class="blog-article">
                    <div class="article-header">
                        <h1 id="articleTitle" class="article-title"></h1>
                        <div class="article-meta">
                            <div class="meta-item">
                                <i class="fas fa-user"></i>
                                <span id="articleAuthor"></span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-calendar"></i>
                                <span id="articleDate"></span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-eye"></i>
                                <span id="articleViews"></span> 阅读
                            </div>
                            <div class="meta-item">
                                <span id="articleCategory" class="article-category"></span>
                            </div>
                        </div>
                    </div>

                    <div id="articleContentBody" class="article-content">
                        <!-- 文章内容将通过JavaScript动态加载 -->
                    </div>

                    <div class="article-footer">
                        <div class="article-actions">
                            <button id="likeBtn" class="action-btn" onclick="toggleLike()">
                                <i class="fas fa-thumbs-up"></i>
                                <span id="likeCount">0</span>
                            </button>
                            <button id="favoriteBtn" class="action-btn" onclick="toggleFavorite()">
                                <i class="fas fa-star"></i>
                                <span>收藏</span>
                            </button>
                        </div>
                        <div class="share-section">
                            <span>分享:</span>
                            <button class="share-btn" onclick="shareToWechat()">
                                <i class="fab fa-weixin"></i>
                            </button>
                            <button class="share-btn" onclick="shareToWeibo()">
                                <i class="fab fa-weibo"></i>
                            </button>
                            <button class="share-btn" onclick="shareToQQ()">
                                <i class="fab fa-qq"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 相关文章 -->
                <div class="related-articles">
                    <h3 class="related-title">相关文章</h3>
                    <div id="relatedList" class="related-list">
                        <!-- 相关文章将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="wrap">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>关于我们</h3>
                    <p>【ubike】从"优质生活触手可及"的初心出发，成为专注于自行车、宠物用品行业的电商独立站。</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h3>营业时间</h3>
                    <p>7x24小时营业</p>
                </div>
                <div class="footer-section">
                    <h3>联系我们</h3>
                    <p>邮箱: h3444850160@gmail.com</p>
                    <p>地址: 河北邢台</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2025 ubike. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="/static/js/script.js"></script>

    <script>
        class BlogDetailManager {
            constructor() {
                this.articleId = this.getArticleIdFromUrl();
                this.articleData = null;
                this.relatedArticles = [];
            }

            // 从URL获取文章ID
            getArticleIdFromUrl() {
                const pathParts = window.location.pathname.split('/');
                return pathParts[pathParts.length - 1];
            }

            // 初始化页面
            async init() {
                if (!this.articleId) {
                    this.showError('文章ID无效');
                    return;
                }

                try {
                    await this.loadArticleData();
                    await this.loadRelatedArticles();
                    this.renderArticle();
                    this.hideLoading();
                } catch (error) {
                    console.error('加载文章失败:', error);
                    this.showError('加载文章失败，请稍后重试');
                }
            }

            // 加载文章数据
            async loadArticleData() {
                const response = await fetch(`/api/blog/posts/${this.articleId}`);
                if (!response.ok) {
                    throw new Error('获取文章数据失败');
                }

                const result = await response.json();
                if (result.success) {
                    this.articleData = result.data;
                } else {
                    throw new Error('文章数据格式错误');
                }
            }

            // 加载相关文章
            async loadRelatedArticles() {
                try {
                    const response = await fetch(`/api/blog/posts?limit=3`);
                    if (response.ok) {
                        const result = await response.json();
                        if (result.success) {
                            // 过滤掉当前文章
                            this.relatedArticles = result.data
                                .filter(article => article.id !== this.articleData.id)
                                .slice(0, 3);
                        }
                    }
                } catch (error) {
                    console.warn('加载相关文章失败:', error);
                    this.relatedArticles = [];
                }
            }

            // 渲染文章内容
            renderArticle() {
                if (!this.articleData) return;

                // 更新面包屑导航
                document.getElementById('breadcrumbTitle').textContent = this.articleData.title;

                // 更新文章基本信息
                document.getElementById('articleTitle').textContent = this.articleData.title;
                document.getElementById('articleAuthor').textContent = this.articleData.author;
                document.getElementById('articleDate').textContent = this.formatDate(this.articleData.created_at);
                document.getElementById('articleViews').textContent = this.articleData.views || 0;
                document.getElementById('articleCategory').textContent = this.articleData.category;
                document.getElementById('likeCount').textContent = this.articleData.likes || 0;

                // 渲染文章内容
                const contentElement = document.getElementById('articleContentBody');
                contentElement.innerHTML = this.parseContent(this.articleData.content);

                // 渲染相关文章
                this.renderRelatedArticles();

                // 显示文章内容
                document.getElementById('articleContent').style.display = 'block';

                // 更新页面标题
                document.title = `${this.articleData.title} - ubike`;
            }

            // 解析文章内容（支持Markdown格式）
            parseContent(content) {
                if (!content) return '<p>文章内容为空</p>';

                // 简单的Markdown解析
                return content
                    .replace(/\n\n/g, '</p><p>')
                    .replace(/\n/g, '<br>')
                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
                    .replace(/^#\s+(.*)$/gm, '<h2>$1</h2>')
                    .replace(/^##\s+(.*)$/gm, '<h3>$1</h3>')
                    .replace(/^>\s+(.*)$/gm, '<blockquote>$1</blockquote>')
                    .replace(/`(.*?)`/g, '<code>$1</code>')
                    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
            }

            // 渲染相关文章
            renderRelatedArticles() {
                const relatedList = document.getElementById('relatedList');
                
                if (this.relatedArticles.length === 0) {
                    relatedList.innerHTML = '<p style="text-align: center; color: #666;">暂无相关文章</p>';
                    return;
                }

                relatedList.innerHTML = this.relatedArticles.map(article => `
                    <a href="/blog/${article.id}" class="related-item">
                        <div class="related-content">
                            <div class="related-item-title">${article.title}</div>
                            <div class="related-item-meta">
                                ${article.author} • ${this.formatDate(article.created_at)} • ${article.views || 0}阅读
                            </div>
                        </div>
                    </a>
                `).join('');
            }

            // 格式化日期
            formatDate(dateString) {
                const date = new Date(dateString);
                return date.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
            }

            // 隐藏加载状态
            hideLoading() {
                document.getElementById('loading').style.display = 'none';
            }

            // 显示错误信息
            showError(message) {
                const loading = document.getElementById('loading');
                loading.innerHTML = `
                    <div style="color: #f44336; text-align: center; padding: 40px 0;">
                        <i class="fas fa-exclamation-triangle" style="font-size: 48px; margin-bottom: 20px;"></i>
                        <h3>加载失败</h3>
                        <p>${message}</p>
                        <button onclick="window.location.href='/blog'" class="btn-primary" style="margin-top: 20px;">
                            返回博客列表
                        </button>
                    </div>
                `;
            }
        }

        // 全局函数
        function toggleLike() {
            const btn = document.getElementById('likeBtn');
            const countSpan = document.getElementById('likeCount');
            
            if (btn.classList.contains('active')) {
                // 取消点赞
                btn.classList.remove('active');
                countSpan.textContent = parseInt(countSpan.textContent) - 1;
            } else {
                // 点赞
                btn.classList.add('active');
                countSpan.textContent = parseInt(countSpan.textContent) + 1;
            }
        }

        function toggleFavorite() {
            const btn = document.getElementById('favoriteBtn');
            
            if (btn.classList.contains('active')) {
                btn.classList.remove('active');
                btn.innerHTML = '<i class="fas fa-star"></i><span>收藏</span>';
            } else {
                btn.classList.add('active');
                btn.innerHTML = '<i class="fas fa-star"></i><span>已收藏</span>';
            }
        }

        function shareToWechat() {
            alert('微信分享功能开发中...');
        }

        function shareToWeibo() {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.title);
            window.open(`http://service.weibo.com/share/share.php?url=${url}&title=${title}`, '_blank');
        }

        function shareToQQ() {
            const url = encodeURIComponent(window.location.href);
            const title = encodeURIComponent(document.title);
            window.open(`http://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}`, '_blank');
        }

        // 检查登录状态
        function checkLoginStatus() {
            const userEmail = localStorage.getItem('userEmail');
            const userName = localStorage.getItem('userName') || (userEmail ? userEmail.split('@')[0] : '用户');
            
            const authButtons = document.getElementById('authButtons');
            const userInfo = document.getElementById('userInfo');
            const userNameElement = document.getElementById('userName');
            
            if (userEmail && authButtons && userInfo && userNameElement) {
                authButtons.style.display = 'none';
                userInfo.style.display = 'flex';
                userNameElement.textContent = userName;
            } else if (authButtons && userInfo) {
                authButtons.style.display = 'flex';
                userInfo.style.display = 'none';
            }
        }

        // 退出登录
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                localStorage.removeItem('userEmail');
                localStorage.removeItem('userName');
                localStorage.removeItem('rememberMe');
                window.location.reload();
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
            
            const blogDetailManager = new BlogDetailManager();
            blogDetailManager.init();
        });
    </script>
</body>
</html>